<!DOCTYPE html>
<html lang="en">

<head>
  @@include('./meta.html',{})
</head>

<body class="app-component">
  @@include('./header.html',{
  "components": "active"
  })
  <div class="component-wrapper">
    <div class="component-navleft">
      @@include('./navleft.html',{
      "tab_element": "active"
      })
    </div><!-- component-navleft -->

    <div class="component-sidebar">
      @@include('./sidebar.html',{
      "tab_element": "active",
      "el_table_basic": "active",
      "urlPrefix": "."
      })
    </div><!-- component-sidebar -->

      <div class="component-content">
        <div class="component-content-header">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb breadcrumb-style1 mg-b-0">
              <li class="breadcrumb-item"><a href="#">Components</a></li>
              <li class="breadcrumb-item"><a href="#">UI Elements</a></li>
              <li class="breadcrumb-item active" aria-current="page">Table Basic</li>
            </ol>
          </nav>
          <a href="javascript:;" id="componentOptions" class="text-secondary mg-l-auto d-xl-none"><i data-feather="more-horizontal"></i></a>
        </div><!-- component-content-header -->

        <div class="component-content-body" data-spy="scroll" data-target="#navSection" data-offset="120">
          <div class="content content-components">
            <div class="container">
              <!--sd-->
              <h1 class="td-title">Table Basic</h1>
        <p class="td-lead">Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap. Read the <a href="https://getbootstrap.com/docs/4.2/content/tables/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>

        <hr class="mg-y-40">

        <h4 id="section1" class="mg-b-10">Basic Example</h4>
        <p class="mg-b-30">Using the most basic table markup, here’s how <code>.table</code> based tables look in Bootstrap. All table styles are inherited in Bootstrap 4, meaning any nested tables will be styled in the same manner as the parent.</p>

        <div data-label="Example" class="td-example demo-table">
          <div class="table-responsive">
            <table class="table mg-b-0">
              <thead>
                <tr>
                  <th scope="col">ID</th>
                  <th scope="col">Name</th>
                  <th scope="col">Job Title</th>
                  <th scope="col">Degree</th>
                  <th scope="col">Salary</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">1</th>
                  <td>Adrian Monino</td>
                  <td>Front-End Engineer</td>
                  <td>Computer Science</td>
                  <td>$120,000</td>
                </tr>
                <tr>
                  <th scope="row">2</th>
                  <td>Socrates Itumay</td>
                  <td>Software Engineer</td>
                  <td>Computer Engineering</td>
                  <td>$150,000</td>
                </tr>
                <tr>
                  <th scope="row">3</th>
                  <td>Reynante Labares</td>
                  <td>Product Manager</td>
                  <td>Business Management</td>
                  <td>$250,000</td>
                </tr>
                <tr>
                  <th scope="row">4</th>
                  <td>Hamza Macasindil</td>
                  <td>Software Engineer</td>
                  <td>Computer Engineering</td>
                  <td>$140,000</td>
                </tr>
                <tr>
                  <th scope="row">5</th>
                  <td>Roven Galeon</td>
                  <td>Project Manager</td>
                  <td>Accountancy</td>
                  <td>$160,000</td>
                </tr>
              </tbody>
            </table>
          </div><!-- table-responsive -->
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;table class=&quot;table&quot;&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th scope=&quot;col&quot;&gt;ID&lt;/th&gt;
      &lt;th scope=&quot;col&quot;&gt;Name&lt;/th&gt;
      &lt;th scope=&quot;col&quot;&gt;Job Title&lt;/th&gt;
      &lt;th scope=&quot;col&quot;&gt;Degree&lt;/th&gt;
      &lt;th scope=&quot;col&quot;&gt;Salary&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;th scope=&quot;row&quot;&gt;1&lt;/th&gt;
      &lt;td&gt;Adrian Monino&lt;/td&gt;
      &lt;td&gt;Front-End Engineer&lt;/td&gt;
      &lt;td&gt;Computer Science&lt;/td&gt;
      &lt;td&gt;$120,000&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th scope=&quot;row&quot;&gt;2&lt;/th&gt;
      &lt;td&gt;Socrates Itumay&lt;/td&gt;
      &lt;td&gt;Software Engineer&lt;/td&gt;
      &lt;td&gt;Computer Engineering&lt;/td&gt;
      &lt;td&gt;$150,000&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th scope=&quot;row&quot;&gt;3&lt;/th&gt;
      &lt;td&gt;Reynante Labares&lt;/td&gt;
      &lt;td&gt;Product Manager&lt;/td&gt;
      &lt;td&gt;Business Management&lt;/td&gt;
      &lt;td&gt;$250,000&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</code></pre>


        <hr class="mg-t-50 mg-b-40">

        <h4 id="section2" class="mg-b-10">Table Head Options</h4>
        <p class="mg-b-30">Similar to tables and dark tables, use the modifier classes <code>.thead-primary</code> or <code>.thead-dark</code> to make colored head.</p>

        <div data-label="Example" class="td-example demo-table">
          <div class="table-responsive">
            <table class="table mg-b-0">
              <thead class="thead-primary">
                <tr>
                  <th scope="col">ID</th>
                  <th scope="col">Name</th>
                  <th scope="col">Job Title</th>
                  <th scope="col">Degree</th>
                  <th scope="col">Salary</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">1</th>
                  <td>Adrian Monino</td>
                  <td>Front-End Engineer</td>
                  <td>Computer Science</td>
                  <td>$120,000</td>
                </tr>
                <tr>
                  <th scope="row">2</th>
                  <td>Socrates Itumay</td>
                  <td>Software Engineer</td>
                  <td>Computer Engineering</td>
                  <td>$150,000</td>
                </tr>
                <tr>
                  <th scope="row">3</th>
                  <td>Reynante Labares</td>
                  <td>Product Manager</td>
                  <td>Business Management</td>
                  <td>$250,000</td>
                </tr>
              </tbody>
            </table>
          </div><!-- table-responsive -->
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;thead class=&quot;thead-primary&quot;&gt;...&lt;/thead&gt;</code></pre>

        <div class="table-responsive mg-t-25">
          <table class="table table-components">
            <thead>
              <tr>
                <th class="wd-40p">Class Reference</th>
                <th class="wd-60p">Color</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>class="thead-[color]"</td>
                <td>primary | secondary | success | danger | warning | info | light | dark</td>
              </tr>
            </tbody>
          </table>
        </div><!-- table-responsive -->

        <hr class="mg-y-40">

        <h4 id="section3" class="mg-b-10">Striped Rows</h4>
        <p class="mg-b-30">Use <code>.table-striped</code> to add zebra-striping to any table row within the tbody.</p>

        <div data-label="Example" class="td-example demo-table">
          <div class="table-responsive">
            <table class="table table-striped mg-b-0">
              <thead>
                <tr>
                  <th scope="col">ID</th>
                  <th scope="col">Name</th>
                  <th scope="col">Job Title</th>
                  <th scope="col">Degree</th>
                  <th scope="col">Salary</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">1</th>
                  <td>Adrian Monino</td>
                  <td>Front-End Engineer</td>
                  <td>Computer Science</td>
                  <td>$120,000</td>
                </tr>
                <tr>
                  <th scope="row">2</th>
                  <td>Socrates Itumay</td>
                  <td>Software Engineer</td>
                  <td>Computer Engineering</td>
                  <td>$150,000</td>
                </tr>
                <tr>
                  <th scope="row">3</th>
                  <td>Reynante Labares</td>
                  <td>Product Manager</td>
                  <td>Business Management</td>
                  <td>$250,000</td>
                </tr>
                <tr>
                  <th scope="row">4</th>
                  <td>Hamza Macasindil</td>
                  <td>Software Engineer</td>
                  <td>Computer Engineering</td>
                  <td>$140,000</td>
                </tr>
                <tr>
                  <th scope="row">5</th>
                  <td>Roven Galeon</td>
                  <td>Project Manager</td>
                  <td>Accountancy</td>
                  <td>$160,000</td>
                </tr>
              </tbody>
            </table>
          </div><!-- table-responsive -->
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;table class=&quot;table table-striped&quot;&gt;...&lt;/table&gt;</code></pre>


        <hr class="mg-t-50 mg-b-40">

        <h4 id="section4" class="mg-b-10">Bordered Table</h4>
        <p class="mg-b-30">Add <code>.table-bordered</code> for borders on all sides of the table and cells.</p>

        <div data-label="Example" class="td-example demo-table">
          <div class="table-responsive">
            <table class="table table-bordered mg-b-0">
              <thead>
                <tr>
                  <th scope="col">ID</th>
                  <th scope="col">Name</th>
                  <th scope="col">Job Title</th>
                  <th scope="col">Degree</th>
                  <th scope="col">Salary</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">1</th>
                  <td>Adrian Monino</td>
                  <td>Front-End Engineer</td>
                  <td>Computer Science</td>
                  <td>$120,000</td>
                </tr>
                <tr>
                  <th scope="row">2</th>
                  <td>Socrates Itumay</td>
                  <td>Software Engineer</td>
                  <td>Computer Engineering</td>
                  <td>$150,000</td>
                </tr>
                <tr>
                  <th scope="row">3</th>
                  <td>Reynante Labares</td>
                  <td>Product Manager</td>
                  <td>Business Management</td>
                  <td>$250,000</td>
                </tr>
                <tr>
                  <th scope="row">4</th>
                  <td>Hamza Macasindil</td>
                  <td>Software Engineer</td>
                  <td>Computer Engineering</td>
                  <td>$140,000</td>
                </tr>
                <tr>
                  <th scope="row">5</th>
                  <td>Roven Galeon</td>
                  <td>Project Manager</td>
                  <td>Accountancy</td>
                  <td>$160,000</td>
                </tr>
              </tbody>
            </table>
          </div><!-- table-responsive -->
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;table class=&quot;table table-bordered&quot;&gt;...&lt;/table&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section5" class="mg-b-10">Hoverable Rows</h4>
        <p class="mg-b-30">Add <code>.table-hover</code> to enable a hover state on table rows within a tbody.</p>

        <div data-label="Example" class="td-example demo-table">
          <div class="table-responsive">
            <table class="table table-hover mg-b-0">
              <thead>
                <tr>
                  <th scope="col">ID</th>
                  <th scope="col">Name</th>
                  <th scope="col">Job Title</th>
                  <th scope="col">Degree</th>
                  <th scope="col">Salary</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">1</th>
                  <td>Adrian Monino</td>
                  <td>Front-End Engineer</td>
                  <td>Computer Science</td>
                  <td>$120,000</td>
                </tr>
                <tr>
                  <th scope="row">2</th>
                  <td>Socrates Itumay</td>
                  <td>Software Engineer</td>
                  <td>Computer Engineering</td>
                  <td>$150,000</td>
                </tr>
                <tr>
                  <th scope="row">3</th>
                  <td>Reynante Labares</td>
                  <td>Product Manager</td>
                  <td>Business Management</td>
                  <td>$250,000</td>
                </tr>
                <tr>
                  <th scope="row">4</th>
                  <td>Hamza Macasindil</td>
                  <td>Software Engineer</td>
                  <td>Computer Engineering</td>
                  <td>$140,000</td>
                </tr>
                <tr>
                  <th scope="row">5</th>
                  <td>Roven Galeon</td>
                  <td>Project Manager</td>
                  <td>Accountancy</td>
                  <td>$160,000</td>
                </tr>
              </tbody>
            </table>
          </div><!-- table-responsive -->
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;table class=&quot;table table-hover&quot;&gt;...&lt;/table&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section6" class="mg-b-10">Compact Table</h4>
        <p class="mg-b-30">Add <code>.table-sm</code> to make tables more compact by cutting cell padding in half.</p>

        <div data-label="Example" class="td-example demo-table">
          <div class="table-responsive">
            <table class="table table-sm mg-b-0">
              <thead>
                <tr>
                  <th scope="col">ID</th>
                  <th scope="col">Name</th>
                  <th scope="col">Job Title</th>
                  <th scope="col">Degree</th>
                  <th scope="col">Salary</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">1</th>
                  <td>Adrian Monino</td>
                  <td>Front-End Engineer</td>
                  <td>Computer Science</td>
                  <td>$120,000</td>
                </tr>
                <tr>
                  <th scope="row">2</th>
                  <td>Socrates Itumay</td>
                  <td>Software Engineer</td>
                  <td>Computer Engineering</td>
                  <td>$150,000</td>
                </tr>
                <tr>
                  <th scope="row">3</th>
                  <td>Reynante Labares</td>
                  <td>Product Manager</td>
                  <td>Business Management</td>
                  <td>$250,000</td>
                </tr>
                <tr>
                  <th scope="row">4</th>
                  <td>Hamza Macasindil</td>
                  <td>Software Engineer</td>
                  <td>Computer Engineering</td>
                  <td>$140,000</td>
                </tr>
                <tr>
                  <th scope="row">5</th>
                  <td>Roven Galeon</td>
                  <td>Project Manager</td>
                  <td>Accountancy</td>
                  <td>$160,000</td>
                </tr>
              </tbody>
            </table>
          </div><!-- table-responsive -->
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;table class=&quot;table table-sm&quot;&gt;...&lt;/table&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section7" class="mg-b-10">Colored Variations</h4>
        <p class="mg-b-30">Use contextual classes to color entire table.</p>

        <div data-label="Example" class="td-example demo-table">
          <div class="table-responsive">
            <table class="table table-primary table-hover table-striped mg-b-0">
              <thead>
                <tr>
                  <th scope="col">ID</th>
                  <th scope="col">Name</th>
                  <th scope="col">Job Title</th>
                  <th scope="col">Degree</th>
                  <th scope="col">Salary</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">1</th>
                  <td>Adrian Monino</td>
                  <td>Front-End Engineer</td>
                  <td>Computer Science</td>
                  <td>$120,000</td>
                </tr>
                <tr>
                  <th scope="row">2</th>
                  <td>Socrates Itumay</td>
                  <td>Software Engineer</td>
                  <td>Computer Engineering</td>
                  <td>$150,000</td>
                </tr>
                <tr>
                  <th scope="row">3</th>
                  <td>Reynante Labares</td>
                  <td>Product Manager</td>
                  <td>Business Management</td>
                  <td>$250,000</td>
                </tr>
                <tr>
                  <th scope="row">4</th>
                  <td>Hamza Macasindil</td>
                  <td>Software Engineer</td>
                  <td>Computer Engineering</td>
                  <td>$140,000</td>
                </tr>
                <tr>
                  <th scope="row">5</th>
                  <td>Roven Galeon</td>
                  <td>Project Manager</td>
                  <td>Accountancy</td>
                  <td>$160,000</td>
                </tr>
              </tbody>
            </table>
          </div><!-- table-responsive -->

          <div class="table-responsive mg-t-20">
            <table class="table table-dark table-hover table-striped mg-b-0">
              <thead>
                <tr>
                  <th scope="col">ID</th>
                  <th scope="col">Name</th>
                  <th scope="col">Job Title</th>
                  <th scope="col">Degree</th>
                  <th scope="col">Salary</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">1</th>
                  <td>Adrian Monino</td>
                  <td>Front-End Engineer</td>
                  <td>Computer Science</td>
                  <td>$120,000</td>
                </tr>
                <tr>
                  <th scope="row">2</th>
                  <td>Socrates Itumay</td>
                  <td>Software Engineer</td>
                  <td>Computer Engineering</td>
                  <td>$150,000</td>
                </tr>
                <tr>
                  <th scope="row">3</th>
                  <td>Reynante Labares</td>
                  <td>Product Manager</td>
                  <td>Business Management</td>
                  <td>$250,000</td>
                </tr>
                <tr>
                  <th scope="row">4</th>
                  <td>Hamza Macasindil</td>
                  <td>Software Engineer</td>
                  <td>Computer Engineering</td>
                  <td>$140,000</td>
                </tr>
                <tr>
                  <th scope="row">5</th>
                  <td>Roven Galeon</td>
                  <td>Project Manager</td>
                  <td>Accountancy</td>
                  <td>$160,000</td>
                </tr>
              </tbody>
            </table>
          </div><!-- table-responsive -->
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;table class=&quot;table table-[color]&quot;&gt;...&lt;/table&gt;</code></pre>

        <div class="table-responsive mg-t-25">
          <table class="table table-components">
            <thead>
              <tr>
                <th class="wd-40p">Class Reference</th>
                <th class="wd-60p">Color</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>class="table table-[color]"</td>
                <td>primary | secondary | success | danger | warning | info | light | dark</td>
              </tr>
            </tbody>
          </table>
        </div><!-- table-responsive -->

        <hr class="mg-y-40">

        <h4 id="section8" class="mg-b-10">Responsive Table</h4>
        <p class="mg-b-30">Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a <code>.table</code> with <code>.table-responsive.</code></p>

        <div data-label="Example" class="td-example demo-table">
          <div class="table-responsive">
            <table class="table mg-b-0">
              <thead>
                <tr>
                  <th scope="col">ID</th>
                  <th scope="col">Name</th>
                  <th scope="col">Job Title</th>
                  <th scope="col">Degree</th>
                  <th scope="col">Salary</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">1</th>
                  <td>Adrian Monino</td>
                  <td>Front-End Engineer</td>
                  <td>Computer Science</td>
                  <td>$120,000</td>
                </tr>
                <tr>
                  <th scope="row">2</th>
                  <td>Socrates Itumay</td>
                  <td>Software Engineer</td>
                  <td>Computer Engineering</td>
                  <td>$150,000</td>
                </tr>
                <tr>
                  <th scope="row">3</th>
                  <td>Reynante Labares</td>
                  <td>Product Manager</td>
                  <td>Business Management</td>
                  <td>$250,000</td>
                </tr>
                <tr>
                  <th scope="row">4</th>
                  <td>Hamza Macasindil</td>
                  <td>Software Engineer</td>
                  <td>Computer Engineering</td>
                  <td>$140,000</td>
                </tr>
                <tr>
                  <th scope="row">5</th>
                  <td>Roven Galeon</td>
                  <td>Project Manager</td>
                  <td>Accountancy</td>
                  <td>$160,000</td>
                </tr>
              </tbody>
            </table>
          </div><!-- table-responsive -->
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;div class=&quot;table-responsive&quot;&gt;
  &lt;table class=&quot;table&quot;&gt;...&lt;/table&gt;
&lt;/div&gt;</code></pre>
 
@@include('./footer.html',{})

            </div>
          </div>
        </div><!-- component-content-body -->

        <div class="component-content-sidebar section-nav">
          <label class="tx-10 tx-medium tx-spacing-1 tx-color-03 tx-uppercase tx-sans mg-b-15">On This Page</label>
          <nav id="navSection" class="nav flex-column">
            <a href="#section1" class="nav-link">Basic Example</a>
            <a href="#section2" class="nav-link">Table Head Options</a>
            <a href="#section3" class="nav-link">Striped Rows</a>
            <a href="#section4" class="nav-link">Bordered Table</a>
            <a href="#section5" class="nav-link">Hoverable Rows</a>
            <a href="#section6" class="nav-link">Compact Table</a>
            <a href="#section7" class="nav-link">Colored Variations</a>
            <a href="#section8" class="nav-link">Responsive Table</a>
          </nav>
        </div><!-- component-content-sidebar -->
      </div><!-- component-content -->

    </div><!-- component-wrapper -->


    @@include('./_script.html',{})

    <script>
      $(function(){
        'use strict'
  

      });
    </script>
  </body>
</html>
